<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>{{ data.titleName }}</span>
      </div>
      <el-row v-loading="loading">
        <div style="width: 100%; height: 500px" :id="data.idName"></div>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data!: any;
  @Prop()
  protected peroids!: any;

  @Watch("peroids", { deep: true })
  private draw() {
    const element: any = document.getElementById(this.data.idName);
    const myChart = Echarts.init(element);
    myChart.setOption({
      xAxis: {
        name: "交易时间",
        type: "category",
        data: this.peroids.time,
      },
      yAxis: {
        type: "value",
        min: 0,
        name: this.data.yName,
      },
      series: [
        {
          data: this.data.yName.indexOf('元') > -1 ? this.peroids.avg_price : this.peroids.total_qty,
          type: "line",
          smooth: true,
          itemStyle: {
            normal: {
              color: this.data.color,
            },
          },
        },
      ],
    });
    myChart.dispatchAction({
      type: "mousemove",
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


